<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../src/styles/register-son.css">
    <link rel="stylesheet" href="../src/styles/detailed.css">
    <script src="./js/item.js" type="module"></script>
</head>
<body>
    <div class="site-nav">
        <div class="site-nav-bd">
            <ul class="site-nav-bd-l">
                <li>
                    <div>
                        <a href="" class="first">亲，请登录</a>
                        <a href="">免费注册</a>
                    </div>
                </li>
                <li><a href="">手机逛淘宝</a></li>
                <li><a href="">网页无障碍</a></li>
            </ul>

            <ul class="site-nav-bd-r">
                <li><a href="">淘宝首页</a></li>
                <li class="bg">
                    <a href="">我的淘宝</a>
                    <ul>
                        <li><a href="">已买到的宝贝</a></li>
                        <li><a href="">我的足迹</a></li>
                    </ul>
                </li>
                <li><a href="">购物车</a></li>
                <li class="bg">
                    <a href="">收藏夹</a>
                    <ul>
                        <li><a href="">收藏的宝贝</a></li>
                        <li><a href="">收藏的店铺</a></li>
                    </ul>
                </li>
                <li><a href="">商品分类</a></li>
                <li>|</li>
                <li class="bg">
                    <a href="">千牛卖家中心</a>
                    <ul>
                        <li><a href="">开店入驻</a></li>
                        <li><a href="">已卖出的宝贝</a></li>
                        <li><a href="">出售中的宝贝</a></li>
                        <li><a href="">卖家服务市场</a></li>
                        <li><a href="">卖家培训中心</a></li>
                        <li><a href="">体验中心</a></li>
                        <li><a href="">电商学习中心</a></li>
                    </ul>
                </li>
                <li class="bg"><a href="">联系客服</a></li>
            </ul>
        </div>
    </div> 

    <div class="detailed-content">
        <div class="detailed-main">
            <!-- 左边商品图 -->
            <div class="left">
                <!-- 大图 -->
                <div class="img-l">
                    <img src="../src/img/详情页 (3).jpg" alt="" class="bg" id="bg">
                </div>
                <!-- 小图列表 -->
                <div class="img-item">
                    <ul id="ul">
                        <img src="../src/img/详情页 (3).jpg" alt="" style="width: 60px;
                        height: 60px;
                        display: inline-block;
                        margin: 0 0 0 16px;
                        padding-top: 22px;">
                        <img src="../src/img/详情页 (2).jpg" alt=""style="width: 60px;
                        height: 60px;
                        display: inline-block;
                        margin: 0 0 0 16px;
                        padding-top: 22px;">
                        <img src="../src/img/详情页 (1).jpg" alt=""style="width: 60px;
                        height: 60px;
                        display: inline-block;
                        margin: 0 0 0 16px;
                        padding-top: 22px;">
                        <img src="../src/img/详情页.jpg" alt="" style="width: 60px;
                        height: 60px;
                        display: inline-block;
                        margin: 0 0 0 16px;">
                    </ul>
                </div>
            </div>

            <div class="right">
                <!-- 头部文字盒子 -->
                <div class="tb-detail-hd">
                    <h1>【四小恶霸·穷奇】观山海周边杉泽百鬼异兽守护系列玩偶朋友情侣生日礼物 陆吾英招Q版手办动漫二次元</h1>
                    <p>寓意：如虎添翼 平安守护</p>
                </div>
                <!-- 价格盒子 -->
                <div class="price-box">
                    <span style="display: inline-block;">价格</span>
                    <span class="r">￥</span>
                    <span class="num">158.00</span>
                </div>
                <!-- 运费 -->
                <div class="freight">
                    <span class="first" >运费</span>
                    <div class="tb-postAge">
                        <span>北京</span>&nbsp;
                        <span>至</span>&nbsp;
                        <span>杭州⬇江岸区↓下箭头快递：0.00</span>
                    </div>
                </div>
                <!-- 销量 -->
                <div class="tm-ind-panel">
                    <span class="l r">月销量33</span>
                    <span class="r">送天猫积分79</span>
                </div>
                <div>
                    <input type="num" style="display: inline-block;" id="num">
                    <img src="../src/img/APL4$T~OIC_WM5RM0AZ)EX7.png" alt="" style="width: 500px;">
                </div>
                <!-- 购买  加入购物车 -->
                <div class="tb-action">
                    <div class="tb-btn-buy">
                        <a href="">立即购买</a>
                        <a style="background-color: #ff0036;
                        border: 1px solid #ff0036;
                        color: #fff;" class="btn" >加入购物车</a>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>


</body>
</html>
<script src="./js/detailed.js"></script>